<template>
  <div>
    <h1>Music</h1>
    <button
      @click="
        router.push({
          name: 'MusicItem',
          params: {
            id: '001',
            name: '王力宏',
          },
        })
      "
    >
      王力宏
    </button>
    <button
      @click="
        router.push({
          name: 'MusicItem',
          params: {
            id: '002',
            name: '王力',
          },
        })
      "
    >
      王力
    </button>
    <button
      @click="
        router.push({
          name: 'MusicItem',
          params: {
            id: '003',
            name: '王宏',
          },
        })
      "
    >
      王宏
    </button>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Music",
});
</script>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
</script>

<style  scoped >
</style>